<template>
  <view class="domain-Card-item" :class="{ 'alert-card': item.state === 1 }">
    <!-- 警示图标 -->
    <view v-if="item.state === 1" class="alert-icon">⚠️</view>
    
    <view class="card-content">
      <view class="card-header">
        <text class="card-title" :style="{ color: item.state === 1 ? '#fff' : '#333' }">
          {{ item.id }}
          <!-- 状态标签 -->
          <text v-if="item.state === 1" class="status-tag">DNS解析异常</text>
        </text>
      </view>
      <view class="card-details">
        <view class="detail-item">
          <text class="label">域名:</text>
          <text class="value">{{ item.domain }}</text>
        </view>
        <view class="detail-item">
          <text class="label">解析ip:</text>
          <text 
            class="value" 
            :style="{ 
              color: item.state === 1 ? '#ff0000' : '#007AFF',
              animation: item.state === 1 ? 'blink 1s infinite' : ''
            }"
          >
            {{ item.ip }}
          </text>
        </view>
        <view class="detail-item">
          <text class="label">创建时间:</text>
          <text class="value">{{ formatTime(item.create_time) }}</text>
        </view>
        <view 
          class="detail-item alert-time" 
          v-if="item.state === 1 && item.update_time"
        >
          <text class="label">修改时间:</text>
          <text class="value">{{ formatTime(item.update_time) }}</text>
        </view>
      </view>
    </view>
    <view class="card-actions">
      <image src="/static/slh.png" class="action-image" @click="showMenu"></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  methods: {
    showMenu() {
      this.$emit('showMenu', this.index);
    },
    formatTime(isoTime) {
      if (!isoTime) return '';
      return isoTime.replace('T', ' ').substring(0, 19);
    }
  }
};
</script>

<style scoped>
.domain-Card-item {
  margin: 24rpx 12rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.02), 0 12rpx 16rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 警示卡片样式 */
.alert-card {
  background-color: #ffffff;
  border: none;
}

.card-header {
  background: #2d3748;
  padding: 20rpx 32rpx;
  margin-bottom: 32rpx;
  position: relative;
}

/* 警示卡片样式修改 */
.alert-card .card-header {
  background: #e53e3e;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.5rpx;
}

/* 状态标签 */
.status-tag {
  margin-left: 16rpx;
  padding: 4rpx 16rpx;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 24rpx;
  vertical-align: middle;
}

.card-details {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  background: #ffffff;
  padding: 24rpx;
  border-radius: 16rpx;
  box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12rpx 0;
  position: relative;
  
  &:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -12rpx;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
  }
}

.label {
  font-size: 30rpx;
  color: #2d3748;
  min-width: 160rpx;
  font-weight: 600;
  letter-spacing: 0.5rpx;
}

.value {
  font-size: 28rpx;
  color: #4a5568;
  flex: 1;
  text-align: left;
  word-break: break-all;
  padding-left: 20rpx;
  
  &.alert {
    color: #e53e3e;
    font-weight: 600;
  }
}

/* IP闪烁效果 */
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.card-actions {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  z-index: 2;
  padding: 8rpx;
  border-radius: 8rpx;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
  
  &:active {
    background: rgba(255, 255, 255, 0.3);
  }
}

.action-image {
  width: 32rpx;
  height: 32rpx;
  opacity: 0.9;
}

/* 警示图标 */
.alert-icon {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  color: #ffffff;
  font-size: 32rpx;
  z-index: 1;
}
</style>